﻿@page "/tables/selection"

<h3>Table 表格</h3>

<h4>通过设置 <code>SelectedRows</code> 设置表格行状态，通过选中样式可以设置高亮</h4>

<DemoBlock Title="设置选中行功能" Introduction="通过设置 <code>SelectedRows</code> 属性集合初始化表格时默认为选中状态" Name="SelectedRow">
    <Table TItem="Foo" @bind-SelectedRows="SelectedItems"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<p class="mt-3">选中的行记录：</p>
<ul class="ul-demo">
    @foreach (var item in SelectedItems)
    {
        <li>@item.Name</li>
    }
</ul>

<Button OnClick="OnClick" Color="Color.Primary">清除选择</Button>
